<template>
    <div>
        <div class="row">
            <div style="width: 100%;">
                <span class="options-title">操作记录</span>
                <span class="title-tips">通过查看登录时间、登录地点和设备可以判断账号是否正常</span>
                <span class="title-tips" style="color: #FF0000">注（只展示最近30天的登录历史记录）</span>
                <a href="javascript:void(0)" @click="notMeLogin()" class="text-right" style="float: right;line-height: 40px;">不是我登录的？</a>
                <hr>
            </div>
            <div style="width: 100%">
                <table class="table table-borderless sm-hidden">
                    <thead class="thead-light">
                    <tr>
                        <th>登录时间</th>
                        <th>城市</th>
                        <th>IP</th>
                        <th>登录设备</th>
                        <th>操作系统</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="o in optionList">
                        <td>{{o.loginTime}}</td>
                        <td>{{o.addr}}</td>
                        <td>{{o.ipAddr}}</td>
                        <td>{{o.device}}</td>
                        <td v-if="o.os">{{o.os}}</td>
                        <td v-if="!o.os">未知操作系统</td>
                    </tr>

                    </tbody>
                </table>

                <table class="table table-sm table-borderless md-hidden">
                    <thead class="thead-light">
                    <tr>
                        <th>登录时间</th>
                        <th>城市</th>
                        <th>IP</th>
                        <th>登录设备</th>
                        <th>操作系统</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="o in optionList">
                        <td>{{o.loginTime}}</td>
                        <td>{{o.addr}}</td>
                        <td>{{o.ipAddr}}</td>
                        <td>{{o.device}}</td>
                        <td v-if="o.os">{{o.os}}</td>
                        <td v-if="!o.os">未知操作系统</td>
                    </tr>

                    </tbody>
                </table>

                <pagination ref="pagination" v-bind:list="list" :size="8"></pagination>
            </div>
        </div>
        <div id="modify-password-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">重置密码</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group full-width flex">
                                <div class="label-div"><label class="label">输入原始密码：</label></div>
                                <div class="input-div">
                                    <input v-on:blur="onOldPasswordBlur()"
                                           v-bind:class="oldPasswordValidateClass"
                                           class="form-control" type="password" id="old-password"
                                           placeholder="输入密码" v-model="userModify.oldPassword">
                                    <span v-show="oldPasswordValidate === false" class="text-danger">密码最少6位，包含至少1字母和1个数字</span>
                                </div>
                            </div>

                            <div class="form-group full-width flex">
                                <div class="label-div"><label class="label">输入新密码：</label></div>
                                <div class="input-div">
                                    <input v-on:blur="onNewPasswordBlur()"
                                           v-bind:class="newPasswordValidateClass"
                                           class="form-control" type="password" id="new-password"
                                           placeholder="输入密码" v-model="userModify.newPassword">
                                    <span v-show="newPasswordValidate === false" class="text-danger">密码最少6位，包含至少1字母和1个数字</span>
                                    <span v-show="newPasswordSameValidate === false" class="text-danger">密码必须与原始密码不相同！</span>
                                </div>
                            </div>
                            <div class="form-group full-width flex">
                                <div class="label-div"><label class="label">确认新密码：</label></div>
                                <div class="input-div">
                                    <input v-on:blur="onConfirmPasswordBlur()"
                                           v-bind:class="confirmPasswordValidateClass"
                                           id="confirm-new-password" class="form-control"
                                           type="password" placeholder="输入密码" v-model="userModify.confirmNewPassword">
                                    <span v-show="confirmPasswordValidate === false" class="text-danger">确认密码和密码不一致!</span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" v-on:click="confirmModify()">确认</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</template>

<script>
    import Pagination from "../../components/Pagination";
    export default {
        name: "Options",
        components: {Pagination},
        data(){
            return {
                optionList: [],
                loginUser: {},

                userModify: {},

                oldPasswordValidate: true,
                newPasswordValidate: true,
                newPasswordSameValidate: true,
                confirmPasswordValidate: true,
            }
        },
        mounted() {
            let _this = this;
            _this.loginUser = Tool.getLoginUser();
            _this.list(1);
        },
        computed:{
            oldPasswordValidateClass(){
                return{
                    'border-success': this.oldPasswordValidate === true,
                    'border-danger': this.oldPasswordValidate === false,
                }
            },
            newPasswordValidateClass(){
                return{
                    'border-success': this.newPasswordValidate === true && this.newPasswordSameValidate === true,
                    'border-danger': this.newPasswordValidate === false || this.newPasswordSameValidate === false,
                }
            },
            confirmPasswordValidateClass(){
                return{
                    'border-success': this.confirmPasswordValidate === true,
                    'border-danger': this.confirmPasswordValidate === false,
                }
            }
        },
        methods:{
            onOldPasswordBlur(){
                let _this = this;
                _this.oldPasswordValidate = Pattern.validatePasswordWeak(_this.userModify.oldPassword);
                return _this.oldPasswordValidate;
            },
            onNewPasswordBlur(){
                let _this = this;
                _this.newPasswordSameValidate = true;
                _this.newPasswordValidate = Pattern.validatePasswordWeak(_this.userModify.newPassword);
                let newPassword = $("#new-password").val();
                if(newPassword === _this.userModify.oldPassword){
                    _this.newPasswordSameValidate = false;
                }
                return _this.newPasswordValidate && _this.newPasswordSameValidate;
            },
            onConfirmPasswordBlur(){
                let _this = this;
                let confirmPassword = $("#confirm-new-password").val();
                if(Tool.isEmpty(confirmPassword)){
                    return _this.confirmPasswordValidate = false;
                }
                return _this.confirmPasswordValidate = (confirmPassword === _this.userModify.newPassword)
            },

            list(page){
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER+'/user/login/list', {
                    page: page,
                    size: _this.$refs.pagination.size,
                    userId: _this.loginUser.id
                }).then((response) => {
                    let resp = response.data;
                    _this.optionList = resp.content.list;
                    _this.$refs.pagination.render(page,resp.content.total);
                })
            },
            notMeLogin(){
                $("#modify-password-modal").modal("show");
            },
            confirmModify(){
                let _this = this;
                if(!(_this.onOldPasswordBlur()
                    && _this.onNewPasswordBlur()
                    && _this.onConfirmPasswordBlur())
                ){
                    return;
                }
                _this.userModify.userId = _this.loginUser.id;
                _this.userModify.oldPassword = hex_md5(_this.userModify.oldPassword + KEY);
                _this.userModify.newPassword = hex_md5(_this.userModify.newPassword + KEY);

                _this.$ajax.post(process.env.VUE_APP_SERVER+'/user/user/modify-password', _this.userModify).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        $("#modify-password-modal").modal("hide");
                        Toast.success("修改成功");
                        _this.$router.push("/welcome");
                        _this.$parent.$parent.$refs.header.logout();
                        _this.$event.$emit("openLoginModal");
                    }else{
                        Toast.warning(resp.message);
                        _this.userModify = {};
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .options-title{
        font-size: 25px;
        font-weight: bold;
    }
    .title-tips{
        font-size: 14px;
        color: #93999f;
        margin-left: 18px;
        font-weight: 400;
    }
    table{
        text-align: center;
    }
    a{
        text-decoration: none;
    }
    .label{
        line-height: 38px;
        font-weight: bold;
        font-size: 16px;
    }
    .full-width{
        width: 100%;
        margin-top: 5px;
    }
    .flex{
        display: flex;
    }
    .label-div{
        width: 30%;
        text-align: right;
        height: 40px;
    }
    .input-div{
        width: 65%;
    }
</style>